<div class="no-config">
  <table class="top-bar">
    <tr>
      <td class="top-bar__back" (click)="decreasePage()" *ngIf="page !== 0">
        <img src="assets/back.svg" class="top-bar__back-icon" />back
      </td>
      <td class="top-bar__back" *ngIf="page === 0"></td>
      <td class="top-bar__center">
        <div class="no-config__progress-bar-wrapper">
          <div class="no-config__progress-bar" id="progressBar"></div>
        </div>
      </td>
      <td class="top-bar__next" (click)="increasePage()" *ngIf="page !== totalPages">
        next<img src="assets/next.svg" class="top-bar__next-icon" />
      </td>
      <td class="top-bar__next" *ngIf="page === totalPages"></td>
    </tr>
  </table>
  <div *ngIf="page === 0">
    <span class="no-config__1-welcome">Hey there!</span>
    <span class="no-config__text" *ngIf="!configUpdate">
      It looks like this is the first start of OctoDash. <br />
      I'll help you set up your config and get you started. <br />
      If you encounter any issues please check the troubleshooting guide in the GitHub Wiki. <br />
      <br />
      Thanks for choosing OctoDash <fa-icon [icon]="['fas', 'smile']"></fa-icon>
    </span>
    <span class="no-config__text" *ngIf="configUpdate">
      Sorry for bothering you again ... <br />
      We've released an update, so awesome, we needed to change the config. Please review your new config! <br />
      <br />
      Thanks for choosing OctoDash <fa-icon [icon]="['fas', 'smile']"></fa-icon>
    </span>
  </div>
  <div *ngIf="page === 1">
    <span class="no-config__text">
      First, tell me some facts about your printer so I can personalize OctoDash for you.
    </span>
    <form class="no-config__form">
      <label for="printerName" class="no-config__input-label">Printer Name:</label>
      <input
        type="text"
        id="printerName"
        class="no-config__input no-config__2-input"
        maxlength="13"
        [(ngModel)]="config.printer.name"
        name="printerName"
        required
      />
    </form>
    <div class="no-config-explanation" style="margin-top: 7vh;">
      If you're unsure about any values during setup, just stick with the defaults. You can change all values (and even
      more stuff) in the settings menu anytime. There is also a description of each attribute available in the GitHub
      Wiki.
    </div>
  </div>
  <div *ngIf="page === 2">
    <span class="no-config__text">
      I also need some information about your extruder.
    </span>
    <form class="no-config__form no-config__2-form">
      <label for="feedLength" class="no-config__input-label">Feed Length:</label>
      <input
        type="number"
        id="feedLength"
        class="no-config__input no-config__2-input"
        [(ngModel)]="config.filament.feedLength"
        name="feedLength"
        step="1"
        min="0"
        style="width: 48vw;"
        required
      />
      <span class="no-config__input-small-suffix" style="padding-right: 3vw;">mm</span>
      <br />
      <label for="feedSpeed" class="no-config__input-label-small">Feed Speed:</label>
      <input
        type="number"
        id="feedSpeed"
        class="no-config__input no-config__2-input"
        [(ngModel)]="config.filament.feedSpeed"
        name="feedSpeed"
        step="0.5"
        min="0"
        style="width: 48vw;"
        required
      />
      <span class="no-config__input-small-suffix">mm/s</span>
      <div class="no-config-explanation" style="padding: 2vh 4vw 2vh 0; margin-right: 4vw;">
        These values will be used during the Filament Change Process. Be sure to have your Feed Length (length between
        Extruder and Hotend) and Feed Speed configured correctly.
      </div>
    </form>
  </div>
  <div *ngIf="page === 3">
    <span class="no-config__text">
      Now I need to know something about your OctoPrint setup, so I can talk to your printer.
    </span>
    <form class="no-config__form">
      <label for="octoprintURLName" class="no-config__input-label">URL:</label>
      <span class="no-config__input-prefix">http://</span>
      <input
        type="text"
        id="octoprintURLName"
        class="no-config__input"
        [(ngModel)]="this.config.octoprint.urlSplit.url"
        name="octoprintURLName"
        required
        style="width: 42.5vw;"
      />
      :
      <input
        type="text"
        id="octoprintURLPort"
        class="no-config__input"
        [(ngModel)]="this.config.octoprint.urlSplit.port"
        name="octoprintURLPort"
        required
        style="width: 14vw;"
      />
      <br />
      <label for="accessToken" class="no-config__input-label">API Key:</label>
      <input
        type="text"
        id="accessToken"
        class="no-config__input"
        [(ngModel)]="this.config.octoprint.accessToken"
        name="accessToken"
        style="width: 67vw;"
        required
      />
    </form>
  </div>
  <div *ngIf="page === 4">
    <span class="no-config__text">
      And now personalize me to your liking.
    </span>
    <form class="no-config__form">
      <div class="no-config__checkbox-container" (click)="config.octodash.touchscreen = !config.octodash.touchscreen">
        <span class="no-config__checkbox">
          <span class="no-config__checkbox-checked" *ngIf="config.octodash.touchscreen"></span>
        </span>
        Use Touchscreen
      </div>
      <br />
      <label for="octodashPolling" class="no-config__input-label">Value Refresh Interval:</label>
      <input
        type="number"
        id="octodashPolling"
        class="no-config__input"
        [(ngModel)]="this.config.octodash.pollingInterval"
        name="octodashPolling"
        required
        style="width: 11vw;"
      />
      ms
      <div class="no-config-explanation" style="margin-top: 7vh;">
        Don't set your Value Refresh Interval too low (und 1000ms) as this may effect the performance of the Raspberry
        Pi.
      </div>
    </form>
  </div>
  <div *ngIf="page === 5">
    <span class="no-config__text">
      What plugins are you running?
    </span>
    <div style="text-align: center;">
      <div class="no-config__checkbox-container" (click)="config.plugins.displayLayerProgress.enabled = true">
        <span class="no-config__checkbox">
          <span
            class="no-config__checkbox-checked no-config__checkbox-checked-disabled"
            *ngIf="config.plugins.displayLayerProgress.enabled"
          ></span>
        </span>
        Display Layer Progress&nbsp;&nbsp;
      </div>
      <div
        class="no-config__checkbox-container"
        (click)="config.plugins.enclosure.enabled = !config.plugins.enclosure.enabled"
      >
        <span class="no-config__checkbox">
          <span class="no-config__checkbox-checked" *ngIf="config.plugins.enclosure.enabled"></span>
        </span>
        Enclosure
      </div>
      <div
        class="no-config__checkbox-container"
        (click)="config.plugins.filamentManager.enabled = !config.plugins.filamentManager.enabled"
      >
        <span class="no-config__checkbox">
          <span class="no-config__checkbox-checked" *ngIf="config.plugins.filamentManager.enabled"></span>
        </span>
        Filament Manager&nbsp;&nbsp;
      </div>
      <div
        class="no-config__checkbox-container"
        (click)="config.plugins.preheatButton.enabled = !config.plugins.preheatButton.enabled"
      >
        <span class="no-config__checkbox">
          <span class="no-config__checkbox-checked" *ngIf="config.plugins.preheatButton.enabled"></span>
        </span>
        Preheat Button
      </div>
      <div
        class="no-config__checkbox-container"
        (click)="config.plugins.printTimeGenius.enabled = !config.plugins.printTimeGenius.enabled"
      >
        <span class="no-config__checkbox">
          <span class="no-config__checkbox-checked" *ngIf="config.plugins.printTimeGenius.enabled"></span>
        </span>
        Print Time Genius&nbsp;&nbsp;
      </div>
      <div
        class="no-config__checkbox-container"
        (click)="config.plugins.psuControl.enabled = !config.plugins.psuControl.enabled"
      >
        <span class="no-config__checkbox">
          <span class="no-config__checkbox-checked" *ngIf="config.plugins.psuControl.enabled"></span>
        </span>
        PSU Control
      </div>
      <div class="no-config-explanation">
        Enclosure and PSU Control Plugin can be configured further in the settings.
      </div>
    </div>
  </div>
  <div *ngIf="page === 6">
    <span class="no-config__text">
      Great! I'll check everything.
    </span>
    <div class="no-config__6-check-wrapper">
      <span class="no-config__6-check">
        <img src="assets/checkmark.svg" class="no-config__6-check-icon" *ngIf="configValid" />
        <img src="assets/error.svg" class="no-config__6-check-icon" *ngIf="configValid == false" />
        Config Validation
      </span>
      <span class="no-config__6-errors" *ngFor="let error of configErrors">{{ error }}</span>
      <div *ngIf="configValid">
        <span class="no-config__6-check">
          <img src="assets/checkmark.svg" class="no-config__6-check-icon" *ngIf="octoprintConnection" />
          <img src="assets/error.svg" class="no-config__6-check-icon" *ngIf="octoprintConnection == false" />
          Octoprint Connection
        </span>
        <span class="no-config__6-errors" *ngIf="octoprintConnectionError">{{ octoprintConnectionError }}</span>
      </div>
      <div *ngIf="configValid && octoprintConnection">
        <span class="no-config__6-check">
          <img src="assets/checkmark.svg" class="no-config__6-check-icon" *ngIf="!configSaved" />
          <img src="assets/error.svg" class="no-config__6-check-icon" *ngIf="configSaved" />
          Saving Config
        </span>
        <span class="no-config__6-errors" *ngIf="configSaved">{{ configSaved }}</span>
      </div>
      <span
        *ngIf="configValid && octoprintConnection && !configSaved"
        class="no-config__6-finish"
        (click)="finishWizard()"
        >done
      </span>
    </div>
  </div>
</div>
